<template>
  <van-card v-if="product.goods_id" :desc="product.goods_remark" :title="product.goods_name" :thumb="product.original_img" class="card-item" :thumb-link="'/product_detail?id='+product.goods_id+'&from='+$route.name">
    <div slot="price" class="price">
      <div v-if="!isOldVip">
        <span class="price-number">
          <span class="price-sign">&yen;</span>
          {{product.shop_price}}
        </span>
        <span class="price-unit">/份</span>
      </div>
      <div v-else>
        <span class="price-number">
          {{product.weight}}g
        </span>
        <span class="price-unit">/份</span>
      </div>
      <div class="card-footer product-add">
        <img src="/img/30.png" @click="addCart" alt class="product-add-img" v-if="product.cart_info.goods_num==0"/>
          <van-stepper v-model="product.cart_info.goods_num" v-else min="0" max="10" @change="updateCartNum"/>
      </div>
    </div>
    <div slot="tags" v-if="product.prom_name">
      <div class="tags">
        <span class="tags-title">{{product.prom_name}}</span>
      </div>
    </div>
  </van-card>
</template>

<script>
import { Card } from "vant";
Vue.use(Card);
import { Stepper } from 'vant';
Vue.use(Stepper);
export default {
  props: {
    product: {
      type: Object,
      default: () => {
        return {}
      }
    },
    value:{
      type: [Number, String],
      default: 0
    },
    isOldVip: {
      type: Boolean,
      default: false
    }
  },
  mounted(){
    if(this.isOldVip) {
      this.product.cart_info = Object.assign( this.product.cart_info || {},{
        goods_num: this.value
      })
    }
  },
  methods: {
    addCart(){
      if(this.isOldVip) {
        this.product.cart_info.goods_num = 1
        return false
      }
      this.$store.dispatch('add2Cart',{
        goods_id: this.product.goods_id
      }).then( res =>{
        this.product.cart_info.goods_num = 1
        this.product.cart_info.id = res.data.result.cart_id
      }).catch(e=>{

      })
    },
    updateCartNum(value = 0){
      if(this.isOldVip) {
        this.product.cart_info.goods_num = value
        return false
      }
      if(this.doNotUpdate) return false
      this.$store.dispatch('updateCartNum',{
        id: this.product.cart_info.id,
        num: value
      }).then( res =>{
        this.product.cart_info.goods_num = value
      }).catch(e=>{
        // this.doNotUpdate = true
        // this.product.cart_info.goods_num = beforeNum || 0
      })
    },
    toDetail(){
      this.$router.push({
        path: '/product_detail',
        query: {
          id: this.product.goods_id,
          from: this.$route.name
        }
      })
    }
  },
  watch:{
    'product.cart_info.goods_num'(v){
      this.$emit('input', v)
    }
  }
};
</script>

<style lang="less">
.card-item {
  position: relative;
  height: 107px;
  margin: 0px 14px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid rgba(237, 237, 237, 1);

  .tags {
    height: 14px;
    width: 64px;
    text-align: center;
    line-height: 13px;
    background: url(/img/58.png) no-repeat center center;
    background-size: cover;
    .tags-title {
      font-size: 9px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
  .van-card__title {
    font-size: 14px;
    font-family: PingFangSC-Medium;
    font-weight: 600;
    color: rgba(48, 48, 48, 1);
  }

  .van-card__desc {
    font-size: 11px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
  .price {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 9px;
    .price-number {
      font-size: 11px;
      font-family: PingFangSC-Medium;
      font-weight: 600;
      color: rgba(225, 52, 52, 1);

      .price-sign {
        font-size: 9px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(225, 52, 52, 1);
      }
    }
    .price-unit {
      font-size: 9px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(140, 140, 140, 1);
    }
    .card-footer {
      height: 17px;
      width: 17px;
      img {
        height: 17px;
        width: 17px;
        vertical-align: middle;
      }
    }
  }
  .product-add {
      // display: flex;
      width: unset !important;
      .product-add-img {
          height: 21px;
          width: 21px;
      }
      .van-stepper{
          button{
              height: 21px;
              width: 21px;
          }
          input{
              height: 21px;
              width: 21px;
          }
      }
  }
}
</style>
